<template>
	<view class="order">
		<!-- 新增收货地址 -->
		<view class="add">
			<span>
				<img src="../../icons/icon/plus-sign.png" alt="">
				<span class="xz">新增收货地址</span>
			</span>
			
			<uni-icons type="forward" size="20"></uni-icons>
		</view>
		<!-- 商品信息 -->
		<view class="commodity">
			<view class="shangpin">
				<dl>
					<dt>
						图片
					</dt>
					<dd>
						商品信息
					</dd>
				</dl>
			</view>
			
			<!-- 合计 -->
			<view class="hj">
				<span>共件商品</span>
				<span>合计:</span>
				<span>￥</span>
			</view>
			
			<!-- 优惠券 -->
			<view class="yh">
				<span>优惠券:</span>
				<uni-icons class="icon" type="forward" size="20"></uni-icons>
			</view>
			<!-- 留言 -->
			<view class="ly">
				<span>买家留言:</span>
			</view>
			
			<!-- 订单信息 -->
			<view class="dd">
				<ul>
					<li>
						<span>订单金额:</span>
						<span class="qian">￥</span>
					</li>
					<li>
						<span>运费:</span>
						<span class="qian">￥</span>
					</li>
					<li>
						<span>优惠金额:</span>
						<span class="qian">￥</span>
					</li>
					<li>
						<span class="xj">小计:￥</span>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style  lang="scss">
	.order{
		width: 100%;
		height: 100%;
		background: #eee;
		.add{
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: white;
			img{
				width: 20px;
				height: 20px;
				float: left;
				margin-left: 10px;
			}
			.xz{
				float: left;
				margin-left: 10px;
			}
		}
	}
	
	.commodity{
		width: 100%;
		.shangpin{
			width: 100%;
			height: 93px;
			margin-top: 10px;
			border-bottom: 1px solid #eee;
			background: white;
			dl{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				dt{
					width: 68px;
					height: 68px;
					background: skyblue;
				}
				dd{
					width: 218px;
					height: 68px;
					background: green;
				}
			}
		}
		
		.hj{
			width: 100%;
			height: 32px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background: white;
			span{
				margin-right: 10px;
			}
		}
		
		.yh{
			width: 100%;
			height: 32px;
			background: white;
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			span{
				margin-left: 13px;
			}
			.icon{
				margin-right: 1px;
			}
		}
		
		.ly{
			width: 100%;
			height: 32px;
			background: white;
			display: flex;
			justify-content: center;
			span{
				display: block;
				width: 296px;
				height: 32px;
				line-height: 32px;
				border-top: 1px solid #eee;
			}
		}
		
		.dd{
			width: 100%;
			height: 145px;
			background: white;
			margin-top: 10px;
			display: flex;
			justify-content: center;
			ul{
				width: 296px;
				height: 100%;
				li{
					width: 100%;
					height: 24px;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					.qian{
						color: #eb2444;
					}
				}
				
				.xj{
					margin-left: 80%;
					color: #eb2444;
				}
			}
		}
	}
</style>